<template>
	<view class="slw-input">
		<input 
		class="uni-input"   
		:type="type"
		:value="inputValue" 
		:maxlength="maxlength"
		:password="inputPassword" 
		:placeholder="placeholder"
		@input="changeInput"
		@focus="focusInput"
		@blur="blurInput"/>
		<view v-if="inputValue.length" class="uni-icon uni-icon__clear" @click="onClearInput">&#xe434;</view>
		<view v-if="showPassword" class="uni-icon uni-icon__eye" :class="{'uni-icon__eye-active': !inputPassword}" @click="onShowPass">&#xe568;</view>
	</view>
</template>

<script>
	export default {
		name: 'SlwButton',
		props: {
			//	输入框的初始内容
			value: {
				type: String,
				default: ''
			},
			//	input 的类型 [ 'text' => '文本输入键盘', 'number' => '数字输入键盘', 'idcard' => '身份证输入键盘', 'digit' => '带小数点的数字键盘' ]
			type: {
				type: String,
				default: 'text'
			},
			//	是否是密码类型
			password: {
				type: Boolean,
				default: false
			},
			//	最大输入长度，设置为 -1 的时候不限制最大长度
			maxlength: {
				type: [Number, String],
				default: 140
			},
			//	输入框为空时占位符
			placeholder: {
				type: String,
				default: ''
			},
		},
		// watch: {
		// 	value(val) {
		// 		//val
		// 	},
		// 	password(val) {
		// 		//val
		// 	}
		// },
		data() {
			return {
				inputValue: '',
				inputPassword: false,
				showPassword: false
			}
		},
		mounted() {
			const {value, password} = this
			this.inputValue = value
			this.inputPassword = password
			this.showPassword = password
		},
		// beforeUpdate() {
		// 	const {value, password} = this
		// 	// this.inputValue = this.value
		// 	// this.inputPassword = password
		// },
		methods: {
			changeInput(e) {
				const {value} = e.detail
				this.inputValue = value
				// if(this.$listeners['input']) {
				// 	this.$emit('input', value)
				// }
				this.$emit('input', value)
			},
			focusInput() {
				if(this.$listeners['focus']) {
					this.$emit('focus')
				}
			},
			blurInput() {
				if(this.$listeners['blur']) {
					this.$emit('blur')
				}
			},
			//	清空 input
			onClearInput() {
				this.inputValue = ''
			},
			//	显示密码
			onShowPass() {
				const {inputPassword} = this
				this.inputPassword = !inputPassword
			}
		}
	}
</script>

<style lang="scss">
	.slw-input{
		width: 100%;
		height: 48rpx;
		display: flex;
		align-items: center;
		.uni-icon{
			color: #ccc;
			width:64rpx;
			height: 56rpx;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.uni-input{
			flex: 1;
			height: inherit;
		}
		.uni-icon__eye-active{
			color: $theme_color;
		}
	}
</style>
